<template>
  <div class="home" @click='$emit("NewSong",newsongs)'> 
    <section>
      <HeadlineNav><slot>编辑推荐</slot></HeadlineNav>
      <ul class="songsitem">
        <SongsCard
          v-for="item in songslist"
          :item="item"
          :key="item.id"
          @click.native="$emit('songComment',item)"
        ></SongsCard>
      </ul>
    </section>
    <section>
      <HeadlineNav><slot>最新音乐</slot></HeadlineNav>
      <ul class="newlist">
        <NewSongs
          v-for="item in newsongs"
          :key="item.id"
          :item="item"
          :playsong="playsong"
          :played="played"
          :cardsongs="cardsongs"
          @item-id="$emit('item-id',$event)"
          @click.native="$emit('songId', item)"
        ></NewSongs>
      </ul>
    </section>
 
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import HeadlineNav from "@/components/HeadlineNav.vue";
import SongsCard from "@/components/SongsCard.vue";
import NewSongs from "@/components/NewSongs.vue";


export default {
  // name: 'HomeView',
  props:{
    playsong:Object,
    played:Boolean,
    cardsongs:Object
  },
  data: function () {
    return {
      songslist: [],
      newsongs: [],
      singers: [],

    };
  },
  created: function () {
    this.axios
      .get("https://apis.netstart.cn/music/personalized?limit=6")
      .then((res) => {
        //  console.log(res.data.result);
        this.songslist = res.data.result;
      });

    this.axios
      .get("https://apis.netstart.cn/music/personalized/newsong")
      .then((res) => {
        this.newsongs = res.data.result;
      });
    
  },
  components: {
    // HelloWorld
    HeadlineNav,
    SongsCard,
    NewSongs,
   
  },
};
</script>
<style lang="less" scoped>
.home {
  position: relative;
  top: 122px;
}
.songsitem {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: space-around;
  margin: 0;
  padding: 0;
}
.newlist {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 10px;
}


</style>
